/*
 * @param {String} width - 滚屏宽度，默认单位rpx，可设置px或%
 * @param {String} height - 滚屏高度，默认单位rpx，可设置px或%
 * @param {String} background - 滚屏背景颜色，不支持传入图片（可设置父元素），支持 linear-gradient 渐变色
 * @param {String} font-size - 信息文字大小，默认单位rpx
 * @param {String} color - 信息文字颜色，支持rgb与16进制
 * @param {String} align - 信息文字对齐方式
 * @param {String} zindex - z-index，堆叠层级
 * @param {String} border-radius - 滚屏圆角，默认单位rpx，可设置px或%
 * @param {Array} list - 需要滚动的数据
 * @param {Boolean} beyond - 当信息文字溢出是否显示省略号
 * @param {Number} timer - 滚屏翻滚时间，单位ms
 */

/*
 * @Tap - 点击时触发，速度快于 @click 事件 - 信息项，包含 list 当前信息与自定义其他数据
 */

<template>
    <view
	class="uH5-textroll-default"
	:style="[widthStyle, heightStyle,
	bgStyle, zindexStyle, radiusStyle
	]"
	>
      <view
	  class="uH5-textroll-content"
	  :class="{'uH5-textroll-animate-up': animateUp}"
	  :style="[animateUp ? soleStyle : '',
	  
	  ]"
	  >
        <view
		class="uH5-textroll-item"
		:style="[lineHeightStyle, sizeStyle,
		colorStyle, alignStyle
		]"
		v-for="(item, index) in list"
		:key="index"
		@tap="Tap(item)"
		>
			<view
			:class="[beyond ? 'uH5-textroll-beyond' : ''
			]"
			>{{ item.value }}</view>
		</view>
      </view>
    </view>
</template>

<script>

import util from '../../libs/util/util.js'

export default {
	
  name: "u-textroll",
  data() {
    return {
		
	  // 是否开启动画向上推移
      animateUp: false,
	  
      // 定时器
	  timers: null,
	  
    }
  },
  
  props: {
	  
	width: {//滚屏整体宽度，默认单位rpx，可设置px或%
		type: String,
		default: '100%'
	},
	
	height: {//滚屏整体高度，默认单位rpx，可设置px或%
		type: String,
		default: '80rpx'
	},
	
	background: {//滚屏背景颜色，不支持传入图片（可设置父元素），支持 linear-gradient 渐变色
		type: String,
		default: '#000000'
	},
	
	fontSize: {//信息文字大小，默认单位rpx
		type: String,
		default: '30rpx'
	},
	
	color: {//信息文字颜色，支持rgb与16进制
		type: String,
		default: '#FFFFFF'
	},
	
	align: {//信息文字对齐方式
		type: String,
		default: 'center'
	},
	
	zindex: {//z-index，堆叠层级
		type: String,
		default: '10'
	},
	
	borderRadius: {//滚屏圆角，默认单位rpx，可设置px或%
		type: String,
		default: '0rpx'
	},
	
	list: {//需要滚动的数据
		type: Array,
		default: () => [{value: '暂无信息'}]
	},
	
	beyond: {//当信息文字溢出是否显示省略号
		type: Boolean,
		default: true
	},
	
	timer: {//滚屏翻滚时间，单位ms
		type: Number,
		default: 2000
	},
	  
  },
  
  computed:{
	  
	  // 宽度处理(加单位)
	  widthStyle: function(){
		 let style = {}
		 style.width = util.addCompany(this.width)
		 return style
	  },
	  
	  // 高度处理(加单位)
	  // 同时item行高与动画也需设置高度
	  // lineHeightStyle() | soleStyle()
	  heightStyle: function(){
		 let style = {}
		 style.height = util.addCompany(this.height)
		 return style 
	  },
	  
	  // 高度处理(加单位)
	  lineHeightStyle: function(){
		  let style = {}
		  style.lineHeight = `${util.addCompany(this.height)}`
		  return style 
	  },
	  
	  // 动画处理
	  // animateUp ? soleStyle : ''
	  soleStyle: function(){
		  let style = {}
		  style.transform = `translateY(-${util.addCompany(this.height)})`
		  return style 
	  },
	  
	  // 处理背景
	  bgStyle: function(){
	  	 let style = {}
	  	 style.background = this.background
	  	 return style
	  },
	  
	  // 处理文字字号
	  sizeStyle: function(){
		  let style = {}
		  style.fontSize = util.addCompany(this.fontSize)
		  return style
	  },
	  
	  // 处理文字颜色
	  colorStyle: function(){
		  let style = {}
		  style.color = this.color
		  return style
	  },
	  
	  // 文字对其方式
	  alignStyle: function(){
		  let style = {}
		  style.textAlign = this.align
		  return style
	  },
	  
	  // z-index 堆叠层级
	  zindexStyle: function(){
		  let style = {}
		  style.zIndex = this.zindex
		  return style
	  },
	  
	  // 滚屏圆角值
	  radiusStyle: function(){
		  let style = {}
		  style.borderRadius = util.addCompany(this.borderRadius)
		  return style
	  }
	  
  },
  
  mounted() {
	// timer: 控制滚动时间
    this.timers = setInterval(this.scrollAnimate, this.timer);
  },
  
  methods: {
	  
	/*
	 * 添加移除元素
	 * @return void
	 */
    scrollAnimate: function()
	{
      this.animateUp = true
      setTimeout(() => {
        this.list.push(this.list[0])
        this.list.shift()
        this.animateUp = false
      }, 500)
    },
	
	
	/*
	 * 暴露点击事件(@tap)
	 * 返回当前项数据
	 * @param {String} item - 当前信息项
	 * @return void
	 */
	Tap: function(item)
	{
		this.$emit('Tap', item)
	}
	
  },
  
  destroyed() {
	// 实例销毁后清除定时器
    clearInterval(this.timers)
  }
  
}
</script>

<style lang="scss">
.uH5-textroll-default {
  overflow: hidden;
  .uH5-textroll-content {
    .uH5-textroll-item {
      width: 100%;
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .uH5-textroll-animate-up {
    transition: all 0.5s ease-in-out;
	transform: translateY(-80rpx);
  }
  
}

.uH5-textroll-beyond{
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap;
}
</style>